"use client"

import { textStyles, fontSizes, fontWeights } from '../lib/fontConfig'

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

interface ContentSelectorProps {
  selectedContent: string
  onSelectContent: (type: string) => void
  currentCourse?: Course
  currentSection: number
}

export function ContentSelector({ selectedContent, onSelectContent, currentCourse, currentSection }: ContentSelectorProps) {
  // 根据不同Tab定义不同的选择器内容
  const getContentTypes = () => {
    switch(currentSection) {
      case 1: // 字根学习
        return [
          { id: 'hanzi', label: '基础信息', icon: '💭', color: 'from-blue-400 to-blue-500' },
          { id: 'zigen', label: '演变历程', icon: '🏛️', color: 'from-amber-400 to-orange-500' },
          { id: 'bihua', label: '扩展应用', icon: '🌟', color: 'from-green-400 to-green-500' },
          { id: 'lianxi', label: '随堂小练', icon: '🎮', color: 'from-pink-400 to-red-500' }
        ]
      case 2: // 偏旁笔画
        // 根据当前汉字返回相关的部首和笔画
        const getRadicalsAndStrokes = () => {
          const char = currentCourse?.target_char || '木'
          const radicalStrokeMap: { [key: string]: any[] } = {
            '木': [
              { id: '木', label: '木', icon: '木', color: 'from-green-400 to-green-500', type: 'radical' },
              { id: '一', label: '横', icon: '一', color: 'from-blue-400 to-blue-500', type: 'stroke' },
              { id: '丨', label: '竖', icon: '丨', color: 'from-purple-400 to-purple-500', type: 'stroke' },
              { id: '丿', label: '撇', icon: '丿', color: 'from-orange-400 to-orange-500', type: 'stroke' },
              { id: '丶', label: '点', icon: '丶', color: 'from-pink-400 to-pink-500', type: 'stroke' }
            ],
            '水': [
              { id: '氵', label: '三点水', icon: '氵', color: 'from-blue-400 to-blue-500', type: 'radical' },
              { id: '水', label: '水', icon: '水', color: 'from-cyan-400 to-cyan-500', type: 'radical' },
              { id: '一', label: '横', icon: '一', color: 'from-gray-400 to-gray-500', type: 'stroke' },
              { id: '丨', label: '竖', icon: '丨', color: 'from-indigo-400 to-indigo-500', type: 'stroke' }
            ]
          }
          return radicalStrokeMap[char] || radicalStrokeMap['木']
        }
        return getRadicalsAndStrokes()
      case 3: // 书写讲解 - 显示本课字根和部首笔画
        const getWritingComponents = () => {
          const char = currentCourse?.target_char || '木'
          const writingComponentMap: { [key: string]: any[] } = {
            '木': [
              { id: '木', label: '木', icon: '木', color: 'from-green-400 to-green-500', type: 'zigen' },
              { id: '一', label: '横', icon: '一', color: 'from-blue-400 to-blue-500', type: 'bihua' },
              { id: '丨', label: '竖', icon: '丨', color: 'from-purple-400 to-purple-500', type: 'bihua' },
              { id: '丿', label: '撇', icon: '丿', color: 'from-orange-400 to-orange-500', type: 'bihua' },
              { id: '丶', label: '捺', icon: '丶', color: 'from-pink-400 to-pink-500', type: 'bihua' }
            ],
            '水': [
              { id: '水', label: '水', icon: '水', color: 'from-cyan-400 to-cyan-500', type: 'zigen' },
              { id: '氵', label: '三点水', icon: '氵', color: 'from-blue-400 to-blue-500', type: 'bushou' },
              { id: '丨', label: '竖钩', icon: '亅', color: 'from-purple-400 to-purple-500', type: 'bihua' },
              { id: '丿', label: '撇', icon: '丿', color: 'from-orange-400 to-orange-500', type: 'bihua' }
            ],
            '火': [
              { id: '火', label: '火', icon: '火', color: 'from-red-400 to-red-500', type: 'zigen' },
              { id: '灬', label: '四点底', icon: '灬', color: 'from-orange-400 to-orange-500', type: 'bushou' },
              { id: '丶', label: '点', icon: '丶', color: 'from-pink-400 to-pink-500', type: 'bihua' },
              { id: '丿', label: '撇', icon: '丿', color: 'from-yellow-400 to-yellow-500', type: 'bihua' }
            ],
            '土': [
              { id: '土', label: '土', icon: '土', color: 'from-yellow-600 to-amber-600', type: 'zigen' },
              { id: '一', label: '横', icon: '一', color: 'from-blue-400 to-blue-500', type: 'bihua' },
              { id: '丨', label: '竖', icon: '丨', color: 'from-purple-400 to-purple-500', type: 'bihua' },
              { id: '一', label: '横', icon: '一', color: 'from-green-400 to-green-500', type: 'bihua' }
            ]
          }
          return writingComponentMap[char] || writingComponentMap['木']
        }
        return getWritingComponents()
      case 4: // 拖拽组合 - 不需要底部选择器
        return []
      case 5: // 游戏巩固 - 不需要底部选择器
        return []
      case 6: // 结束页
        return [
          { id: 'zongjie', label: '总结', icon: '📋', color: 'from-violet-400 to-violet-500' },
          { id: 'chengji', label: '成绩', icon: '🎯', color: 'from-sky-400 to-sky-500' },
          { id: 'biaoyng', label: '表扬', icon: '👏', color: 'from-lime-400 to-lime-500' },
          { id: 'jixu', label: '继续', icon: '➡️', color: 'from-fuchsia-400 to-fuchsia-500' }
        ]
      default:
        return []
    }
  }

  const contentTypes = getContentTypes()
  
  // 获取Tab标题
  const getTabTitle = () => {
    const tabNames = ['首页', '字根学习', '偏旁笔画', '书写讲解', '拖拽组合', '游戏巩固', '结束页']
    return tabNames[currentSection] || '教学内容'
  }

  // 如果没有内容类型，不显示选择器
  if (contentTypes.length === 0) {
    return null
  }

  return (
    <div className="w-full">
      {/* 更紧凑的选择器 */}
      <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-3 shadow-lg border border-white/60 relative overflow-hidden">
        {/* 背景装饰 */}
        <div className="absolute inset-0 bg-gradient-to-r from-purple-50 via-pink-50 to-blue-50 rounded-2xl opacity-40"></div>
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
        
        {/* 内容区域 */}
        <div className="relative z-10">


          {/* 按钮组 - 根据板块调整布局 */}
          <div className={`gap-2 ${
            currentSection === 2 || currentSection === 3
              ? 'flex justify-center items-center' // 部首笔画讲解和书写讲解：一排显示，自动调整大小
              : 'grid grid-cols-4' // 其他板块：网格显示
          }`}>
            {contentTypes.map((type) => (
                              <button
                key={type.id}
                onClick={() => onSelectContent(type.id)}
                className={`
                  group relative transition-all duration-300 transform hover:scale-105 hover:-translate-y-1
                  ${selectedContent === type.id
                    ? `bg-gradient-to-br ${type.color} text-white shadow-lg scale-105`
                    : 'bg-white/80 text-gray-700 hover:bg-white shadow-md hover:shadow-lg'
                  }
                  border border-transparent hover:border-white/50 rounded-xl
                  ${currentSection === 2 || currentSection === 3
                    ? 'px-3 py-2 text-sm flex-1 max-w-[120px]' // 部首笔画和书写讲解：弹性布局，自动调整宽度
                    : 'p-3' // 其他板块：方形布局
                  }
                `}
              >
                {/* 选中状态的光晕效果 */}
                {selectedContent === type.id && (
                  <div className={`absolute inset-0 bg-gradient-to-br ${type.color} rounded-xl blur-md opacity-20 -z-10 animate-pulse`}></div>
                )}
                
                {currentSection === 2 || currentSection === 3 ? (
                  // 部首笔画和书写讲解：横向布局
                  <div className="flex items-center space-x-2">
                    <div className={`${fontSizes.heading.md} group-hover:animate-bounce`}>
                      {type.icon}
                    </div>
                    <div className={`${textStyles.tag}`}>
                      {type.label}
                    </div>
                  </div>
                ) : (
                  // 其他板块：垂直布局
                  <>
                    <div className={`${fontSizes.heading.md} mb-1 group-hover:animate-bounce`}>
                      {type.icon}
                    </div>
                    <div className={`${textStyles.badge}`}>
                      {type.label}
                    </div>
                  </>
                )}
                
                {/* 选中指示器 */}
                {selectedContent === type.id && (
                  <div className="absolute -top-1 -right-1 text-yellow-300 animate-bounce text-xs">
                    ✨
                  </div>
                )}
                
                {/* 悬浮效果 */}
                <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
              </button>
            ))}
          </div>


        </div>
      </div>
    </div>
  )
} 